import { EditOutlined, FileExcelOutlined, FundProjectionScreenOutlined, GlobalOutlined,MenuFoldOutlined, HomeOutlined, MenuUnfoldOutlined, PictureOutlined, ShopOutlined, UserSwitchOutlined, UsergroupAddOutlined } from '@ant-design/icons';
import { Layout, Menu, Dropdown } from 'antd';
import Sider from 'antd/es/layout/Sider';
import { Header, Content } from 'antd/es/layout/layout';
import React, { useState } from 'react';
import { Outlet, useNavigate } from 'react-router';
import { luyou,getkey } from '../../utils/tools'; 
import { useDispatch } from 'react-redux';
import './Index.scss'
import { color } from 'echarts';
const Index = () => {
    let [iscollapsed,setiscollapsed] = useState(false)
    let item:any = [
        {label:'系统首页',key:'1',icon:<HomeOutlined />},
        {label:'教师管理',key:'2',icon:<PictureOutlined />,children:[
            {label:'教师列表',key:'2-1'},
            {label:'新增教师',key:'2-2'},
            {label:'教师介绍',key:'2-3'},
        ]},
        {label:'学生管理',key:'3',icon:<UsergroupAddOutlined />,children:[
            {label:'所有学生',key:'3-1'},
            {label:'新增学生',key:'3-2'},
            {label:'学生详情',key:'3-3'},
            {label:'成绩管理',key:'3-4'},
        ]},
        {label:'课程管理',key:'4',icon:<ShopOutlined />,children:[
            {label:'课程列表',key:'4-1'},
            {label:'新增课程',key:'4-2'},
            {label:'课程介绍',key:'4-3'},
         
        ]},
        {label:'图书管理',key:'5',icon:<FundProjectionScreenOutlined />,children:[
            {label:'所有图书',key:'5-1'},
            {label:'新增图书',key:'5-2'},
        ]},
       
    ]
       //退出登录
       let navigator = useNavigate()
       let exit = ()=>{
           navigator('/login')
       }
       //下拉菜单
       let items:any = [
        {
            label: <div><HomeOutlined /> <span  style={{fontSize:10,marginLeft:5}}>个人设置</span></div>,
            key: '1',
          },
          {
            label: (
                <div onClick={exit}><HomeOutlined /><span style={{fontSize:10,marginLeft:7}}>退出登录</span></div>
            ),
            key: '2',
          },
    ]
    //顶部导航图标控制侧边显示出现
        var handlechick =()=>{
            setiscollapsed(!iscollapsed)
        }
    //跳转函数
 
       
        let handlekey =({ item, key, keyPath, domEvent }:any)=>{
            console.log({ item, key, keyPath, domEvent });
            // luyou(key)
            // console.log(luyou(key));
            navigator(luyou(key))  
          
           
            
        }
    return (
        <div>
           <Layout >
                <Sider collapsed={iscollapsed} >
                    <div className={`imgs ${ iscollapsed?'chuxian':''}`}>
                        <img src="https://cdn7.axureshop.com/demo/1607406/images/%E6%A1%86%E6%9E%B6/u38.png" alt="" />
                    </div>
                    <div className='txt'>
                        {
                           iscollapsed?'' :'教育行业管理系统'
                        }
                        </div> 
                    <div >
                    <Menu
                        defaultSelectedKeys={['1']}
                        defaultOpenKeys={['sub1']}
                        mode="inline"
                        theme="dark"
                        // inlineCollapsed={collapsed}
                        items={item}
                        onClick={handlekey}
                    />
              </div>
           </Sider>
                <Layout>
                    <Header className='hgheader'>
                    <div onClick={handlechick} className='right'>
                    {iscollapsed? <MenuUnfoldOutlined style={{ color: 'white',fontSize:20 }}/>:<MenuFoldOutlined style={{ color: 'white',fontSize:20 }} />}
                    
                    </div>
                    <div className='right'>
                        
                        <Dropdown menu={{items}}  placement="bottomLeft" arrow>
                           <img style={{height:35,marginTop:20,marginRight:50}} src="https://cdn7.axureshop.com/demo/1607406/images/%E6%A1%86%E6%9E%B6/u365.png" alt="" />
                        </Dropdown>
                    </div>   
                    </Header>

                    <Content > 
                        <Outlet></Outlet>
                    </Content>
                    
                </Layout>
            </Layout>
        </div>
    );
};

export default Index;
